<!--
 * @Descripttion: Sustainable
 * @version: 1.0.0
 * @Author: Kenny
 * @Date: 2021-11-01 15:03:03
 * @LastEditors: ~
 * @LastEditTime: 2021-12-02 12:22:41
-->
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         overflow: hidden;
         width: 100px;
         height: 100px;
         background-color: red;
      }

      .wrapper {
         overflow: hidden;
         background-color: antiquewhite;
      }

      .box1 {
         height: 20px;
         margin: 10px 0;
         background-color: green;
      }

      .box2 {
         height: 20px;
         margin: 20px 0;
         background-color: green;
      }
   </style>
</head>

<body>
   <div>
      <p>bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了 margin-top: 10+20</p>
      <div class="container">
         <div class="wrapper">
            <div class="box1"></div>
         </div>
         <div class="box2"></div>
      </div>

   </div>
</body>

</html>